.content {
  @apply rounded flex bg-white relative flex-col;
  width: 50rem;
  height: 27.5rem;
  border-radius: 0.625rem;
  font-family: Alibaba PuHuiTi 2;

  .close {
    @apply absolute right-5 top-5 w-5 h-5 cursor-pointer z-inherit;
  }

  .titleHead {
    @apply w-full flex items-center shrink-0;
    height: 6.25rem;
    background-size: 100% 100%;
    background-image: url('/images/score-modal-title.webp');

    .header {
      @apply ml-10 mr-5;
      width: 3.5rem;
      height: 3.5rem;
    }

    .scoreDetail {
      font-family: Alibaba PuHuiTi 2;

      .tops {
        @apply flex flex-nowrap;

        .span1 {
          @apply text-xl leading-5 text-black font-bold;
          font-variation-settings: 'opsz' auto;
        }

        .span2 {
          @apply text-xl leading-5 font-bold;
          font-family: Source Han Sans;
          font-variation-settings: 'opsz' auto;
          font-feature-settings: 'kern' on;
          background: linear-gradient(180deg, #ff8400 0%, #ff4e4e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
          margin: 0 0.625rem;
        }

        .corn {
          @apply w-5 h-5;
        }
      }
    }
  }

  .mainContent {
    @apply flex-1 overflow-y-auto flex flex-wrap pl-10;
    width: calc(100% - 0.625rem);
    padding-bottom: 2.75rem;
    padding-right: 0.625rem;

    &::-webkit-scrollbar {
      width: 0.375rem;
    }

    &::-webkit-scrollbar-thumb {
      @apply rounded;
      background-color: #eee;
    }

    &::-webkit-scrollbar-track {
      background: #f7f8fa;
    }

    .mainItem {
      @apply flex justify-between rounded mt-5 items-center px-5;
      width: 21.875rem;
      height: 7.375rem;
      background-size: 100% 100%;
      background-image: url('/images/score-dui.webp');

      &:hover {
        background-image: url('/images/score-dui-active.webp');
      }

      &:nth-child(2n + 1) {
        @apply mr-5;
      }

      .leftScore {
        .leftTitle {
          font-size: 1.375rem;
          font-family: Alibaba PuHuiTi 2;

          span {
            @apply font-bold;

            &.span1 {
              color: #ff0000;
            }

            &.span2 {
              color: #333333;
            }
          }
        }

        .needCorn {
          @apply flex items-center;
          margin-top: 0.625rem;

          img {
            width: 1.375rem;
            height: 1.375rem;
            margin-right: 0.625rem;
          }

          span {
            @apply font-bold;
            font-family: Source Han Sans;
            font-size: 1.375rem;
            font-variation-settings: 'opsz' auto;
            font-feature-settings: 'kern' on;
            color: #ff8032;
          }
        }
      }

      .duiBtn {
        @apply w-20 h-10 leading-10 text-center text-base text-white rounded cursor-pointer;
        font-family: Alibaba PuHuiTi 2;
        background: linear-gradient(90deg, #ff651d 0%, #ffb521 100%);

        &:hover {
          background: #e7511d;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .content {
    width: calc(100vw - 2rem);
    height: 27.5rem;

    .titleHead {
      height: 4.375rem;

      .header {
        @apply mx-4 h-12 w-12;
      }
    }

    .mainContent {
      @apply pl-4 pb-10 pr-0;

      .mainItem {
        @apply mt-4 px-4;
        width: 100%;
        height: 7.375rem;

        &:hover {
          background-image: url('/images/score-dui.webp');
        }

        &:nth-child(2n + 1) {
          @apply mr-0;
        }

        .leftScore {
          .leftTitle {
            @apply text-xl leading-5;
          }

          .needCorn {
            img {
              @apply w-5 h-5 mr-2;
            }

            span {
              @apply font-bold text-xl leading-5;
            }
          }
        }
      }
    }
  }
}
